<template>
  <div class="quick-builder-page">
    <div class="page-header">
      <h2>快速搭建向导</h2>
      <div class="header-desc">通过向导快速创建应用，3分钟完成页面搭建</div>
    </div>

    <el-card class="wizard-card">
      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="选择类型" icon="FolderOpened" />
        <el-step title="配置信息" icon="Edit" />
        <el-step title="字段配置" icon="Grid" />
        <el-step title="功能选择" icon="Setting" />
        <el-step title="完成" icon="CircleCheck" />
      </el-steps>

      <div class="step-content">
        <!-- 步骤1：选择类型 -->
        <div v-show="activeStep === 0" class="step-panel">
          <h3>选择应用类型</h3>
          <el-row :gutter="20" class="template-grid">
            <el-col :span="6" v-for="template in templates" :key="template.type">
              <div
                class="template-card"
                :class="{ active: wizardData.type === template.type }"
                @click="selectTemplate(template.type)"
              >
                <div class="template-icon" :style="{ background: template.color }">
                  <el-icon :size="32"><component :is="template.icon" /></el-icon>
                </div>
                <div class="template-info">
                  <div class="template-name">{{ template.name }}</div>
                  <div class="template-desc">{{ template.description }}</div>
                </div>
                <el-icon v-if="wizardData.type === template.type" class="check-icon" color="#67c23a">
                  <CircleCheckFilled />
                </el-icon>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 步骤2：配置信息 -->
        <div v-show="activeStep === 1" class="step-panel">
          <h3>基本信息配置</h3>
          <el-form :model="wizardData" label-width="120px" style="max-width: 600px; margin: 40px auto">
            <el-form-item label="应用名称" required>
              <el-input v-model="wizardData.name" placeholder="请输入应用名称" />
            </el-form-item>
            <el-form-item label="应用标识" required>
              <el-input v-model="wizardData.code" placeholder="如：user_manage" />
              <template #extra>
                <div style="color: #909399; font-size: 12px">
                  用于生成路由和API路径
                </div>
              </template>
            </el-form-item>
            <el-form-item label="应用描述">
              <el-input
                v-model="wizardData.description"
                type="textarea"
                :rows="3"
                placeholder="请输入应用描述"
              />
            </el-form-item>
            <el-form-item label="应用图标">
              <el-select v-model="wizardData.icon" placeholder="选择图标">
                <el-option label="用户" value="User" />
                <el-option label="文档" value="Document" />
                <el-option label="设置" value="Setting" />
                <el-option label="数据" value="DataLine" />
              </el-select>
            </el-form-item>
            <el-form-item label="所属菜单">
              <el-select v-model="wizardData.menu" placeholder="选择菜单分类">
                <el-option label="销售管理" value="sales" />
                <el-option label="采购管理" value="purchase" />
                <el-option label="库存管理" value="inventory" />
                <el-option label="系统管理" value="system" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <!-- 步骤3：字段配置 -->
        <div v-show="activeStep === 2" class="step-panel">
          <h3>字段配置</h3>
          <div class="fields-config">
            <el-button type="primary" icon="Plus" @click="addField" style="margin-bottom: 20px">
              添加字段
            </el-button>
            <el-button @click="importFromTable" style="margin-bottom: 20px">
              <el-icon><Upload /></el-icon>
              从数据表导入
            </el-button>

            <el-table :data="wizardData.fields" border>
              <el-table-column label="序号" type="index" width="60" align="center" />
              <el-table-column label="字段名" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.name" placeholder="field_name" size="small" />
                </template>
              </el-table-column>
              <el-table-column label="字段标签" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.label" placeholder="字段标签" size="small" />
                </template>
              </el-table-column>
              <el-table-column label="字段类型" width="150">
                <template #default="{ row }">
                  <el-select v-model="row.type" placeholder="类型" size="small">
                    <el-option label="文本" value="input" />
                    <el-option label="数字" value="number" />
                    <el-option label="日期" value="date" />
                    <el-option label="时间" value="datetime" />
                    <el-option label="下拉选择" value="select" />
                    <el-option label="开关" value="switch" />
                    <el-option label="文本域" value="textarea" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="列表显示" width="100" align="center">
                <template #default="{ row }">
                  <el-checkbox v-model="row.showInList" />
                </template>
              </el-table-column>
              <el-table-column label="表单显示" width="100" align="center">
                <template #default="{ row }">
                  <el-checkbox v-model="row.showInForm" />
                </template>
              </el-table-column>
              <el-table-column label="必填" width="80" align="center">
                <template #default="{ row }">
                  <el-checkbox v-model="row.required" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100" fixed="right" align="center">
                <template #default="{ $index }">
                  <el-button
                    type="danger"
                    icon="Delete"
                    link
                    size="small"
                    @click="removeField($index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 步骤4：功能选择 -->
        <div v-show="activeStep === 3" class="step-panel">
          <h3>选择功能模块</h3>
          <div class="features-grid">
            <el-checkbox-group v-model="wizardData.features">
              <el-row :gutter="20">
                <el-col :span="8" v-for="feature in availableFeatures" :key="feature.value">
                  <div class="feature-card" :class="{ active: wizardData.features.includes(feature.value) }">
                    <el-checkbox :label="feature.value">
                      <div class="feature-content">
                        <el-icon :size="24"><component :is="feature.icon" /></el-icon>
                        <div class="feature-name">{{ feature.name }}</div>
                        <div class="feature-desc">{{ feature.description }}</div>
                      </div>
                    </el-checkbox>
                  </div>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </div>
        </div>

        <!-- 步骤5：完成 -->
        <div v-show="activeStep === 4" class="step-panel">
          <div class="complete-panel">
            <el-result icon="success" title="配置完成！" sub-title="点击下方按钮开始生成应用">
              <template #extra>
                <div class="summary-info">
                  <h4>配置信息总结</h4>
                  <el-descriptions :column="2" border>
                    <el-descriptions-item label="应用名称">{{ wizardData.name }}</el-descriptions-item>
                    <el-descriptions-item label="应用标识">{{ wizardData.code }}</el-descriptions-item>
                    <el-descriptions-item label="应用类型">{{ getTemplateInfo(wizardData.type)?.name }}</el-descriptions-item>
                    <el-descriptions-item label="字段数量">{{ wizardData.fields.length }}个</el-descriptions-item>
                    <el-descriptions-item label="选择功能">{{ wizardData.features.length }}个</el-descriptions-item>
                    <el-descriptions-item label="所属菜单">{{ getMenuLabel(wizardData.menu) }}</el-descriptions-item>
                  </el-descriptions>
                </div>
                <el-button type="primary" size="large" @click="handleGenerate" :loading="generating">
                  <el-icon><MagicStick /></el-icon>
                  开始生成
                </el-button>
                <el-button size="large" @click="handleReset">
                  重新配置
                </el-button>
              </template>
            </el-result>
          </div>
        </div>
      </div>

      <div class="step-actions">
        <el-button v-if="activeStep > 0" @click="prevStep">上一步</el-button>
        <el-button v-if="activeStep < 4" type="primary" @click="nextStep" :disabled="!canNext">
          下一步
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 当前步骤
const activeStep = ref(0)

// 向导数据
const wizardData = reactive({
  type: '',
  name: '',
  code: '',
  description: '',
  icon: '',
  menu: '',
  fields: [],
  features: []
})

// 生成状态
const generating = ref(false)

// 应用模板
const templates = ref([
  {
    type: 'crud',
    name: 'CRUD管理',
    description: '增删改查标准页面',
    icon: 'Grid',
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  },
  {
    type: 'form',
    name: '表单页面',
    description: '数据录入表单',
    icon: 'Edit',
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
  },
  {
    type: 'list',
    name: '列表页面',
    description: '数据列表展示',
    icon: 'Menu',
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  {
    type: 'detail',
    name: '详情页面',
    description: '数据详情展示',
    icon: 'Document',
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
  },
  {
    type: 'dashboard',
    name: '数据看板',
    description: '数据可视化看板',
    icon: 'DataBoard',
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
  },
  {
    type: 'workflow',
    name: '工作流程',
    description: '审批流程页面',
    icon: 'Share',
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
  }
])

// 可用功能
const availableFeatures = ref([
  {
    value: 'search',
    name: '搜索功能',
    description: '支持多条件搜索',
    icon: 'Search'
  },
  {
    value: 'export',
    name: '导出功能',
    description: '导出Excel数据',
    icon: 'Download'
  },
  {
    value: 'import',
    name: '导入功能',
    description: '批量导入数据',
    icon: 'Upload'
  },
  {
    value: 'pagination',
    name: '分页功能',
    description: '数据分页显示',
    icon: 'Grid'
  },
  {
    value: 'batch',
    name: '批量操作',
    description: '批量删除/编辑',
    icon: 'DocumentCopy'
  },
  {
    value: 'sort',
    name: '排序功能',
    description: '列表排序',
    icon: 'Sort'
  },
  {
    value: 'filter',
    name: '筛选功能',
    description: '高级筛选',
    icon: 'Filter'
  },
  {
    value: 'print',
    name: '打印功能',
    description: '打印报表',
    icon: 'Printer'
  },
  {
    value: 'permission',
    name: '权限控制',
    description: '按钮权限',
    icon: 'Lock'
  }
])

// 选择模板
const selectTemplate = (type) => {
  wizardData.type = type
  
  // 根据模板类型预设字段
  if (type === 'crud') {
    wizardData.fields = [
      { name: 'id', label: 'ID', type: 'number', showInList: true, showInForm: false, required: false },
      { name: 'name', label: '名称', type: 'input', showInList: true, showInForm: true, required: true },
      { name: 'status', label: '状态', type: 'select', showInList: true, showInForm: true, required: false }
    ]
    wizardData.features = ['search', 'export', 'pagination']
  }
}

// 添加字段
const addField = () => {
  wizardData.fields.push({
    name: '',
    label: '',
    type: 'input',
    showInList: true,
    showInForm: true,
    required: false
  })
}

// 删除字段
const removeField = (index) => {
  wizardData.fields.splice(index, 1)
}

// 从数据表导入
const importFromTable = () => {
  ElMessage.info('从数据表导入字段功能')
}

// 获取模板信息
const getTemplateInfo = (type) => {
  return templates.value.find(t => t.type === type)
}

// 获取菜单标签
const getMenuLabel = (menu) => {
  const labels = {
    sales: '销售管理',
    purchase: '采购管理',
    inventory: '库存管理',
    system: '系统管理'
  }
  return labels[menu] || menu
}

// 能否进入下一步
const canNext = computed(() => {
  if (activeStep.value === 0) return !!wizardData.type
  if (activeStep.value === 1) return !!(wizardData.name && wizardData.code)
  if (activeStep.value === 2) return wizardData.fields.length > 0
  if (activeStep.value === 3) return wizardData.features.length > 0
  return true
})

// 下一步
const nextStep = () => {
  if (canNext.value) {
    activeStep.value++
  }
}

// 上一步
const prevStep = () => {
  activeStep.value--
}

// 重置
const handleReset = () => {
  activeStep.value = 0
  wizardData.type = ''
  wizardData.name = ''
  wizardData.code = ''
  wizardData.description = ''
  wizardData.icon = ''
  wizardData.menu = ''
  wizardData.fields = []
  wizardData.features = []
}

// 生成应用
const handleGenerate = async () => {
  generating.value = true
  
  // 模拟生成过程
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  ElMessage.success('应用生成成功！')
  generating.value = false
  
  // 跳转到应用列表
  setTimeout(() => {
    router.push('/lowcode/applications')
  }, 1000)
}
</script>

<style scoped lang="scss">
.quick-builder-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;

  h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #303133;
  }

  .header-desc {
    color: #909399;
    font-size: 14px;
  }
}

.wizard-card {
  max-width: 1200px;
  margin: 0 auto;

  :deep(.el-card__body) {
    padding: 40px;
  }

  .el-steps {
    margin-bottom: 40px;
  }
}

.step-content {
  min-height: 400px;
}

.step-panel {
  h3 {
    text-align: center;
    margin: 0 0 30px 0;
    font-size: 20px;
    color: #303133;
  }
}

.template-grid {
  margin-top: 30px;
}

.template-card {
  position: relative;
  padding: 20px;
  border: 2px solid #dcdfe6;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 20px;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
  }

  &.active {
    border-color: #67c23a;
    background: #f0f9ff;
  }

  .template-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 15px;
  }

  .template-info {
    .template-name {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 8px;
    }

    .template-desc {
      font-size: 13px;
      color: #909399;
    }
  }

  .check-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
  }
}

.fields-config {
  max-width: 100%;
}

.features-grid {
  margin-top: 30px;
}

.feature-card {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  transition: all 0.3s;

  &:hover {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }

  &.active {
    border-color: #409eff;
    background: #f0f9ff;
  }

  .feature-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .el-icon {
      margin-bottom: 10px;
      color: #409eff;
    }

    .feature-name {
      font-size: 14px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .feature-desc {
      font-size: 12px;
      color: #909399;
    }
  }

  :deep(.el-checkbox) {
    width: 100%;

    .el-checkbox__label {
      width: 100%;
      padding-left: 0;
    }

    .el-checkbox__input {
      display: none;
    }
  }
}

.complete-panel {
  .summary-info {
    margin: 30px 0;

    h4 {
      text-align: center;
      margin-bottom: 20px;
      color: #303133;
    }
  }

  .el-result {
    padding: 40px 0;
  }
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
</style>

